<template>
  <FirstScreen/>
  <div class="homeBox">
    <!--基本信息-->
    <User />
    <!--技术栈-->
    <Technology />
    <!--作品集-->
    <Portfolio />
    <!--休闲区域-->
    <Fallow />
    <!--经历-->
    <Experience />
  </div>
</template>

<script setup>
  import FirstScreen from "../components/FirstScreen.vue"
  import User from "../components/User.vue"
  import Technology from "../components/Technology.vue"
  import Portfolio from "../components/Portfolio.vue"
  import Fallow from "../components/Fallow.vue"
  import Experience from "../components/Experience.vue"
</script>

<style>
  .homeBox{
    width: 100vw;
    height: 100vh;
    overflow: auto;
    scroll-snap-type: y mandatory;
  }
  .homeBox > div{
    scroll-snap-align: center;
    scroll-snap-stop: always;
    width: 100vw;
    height: 100vh;
    background-size: cover !important;
    position: relative;
    overflow: hidden;
  }
</style>